<template>
  <div class="hello">
    <h1>{{ count }}</h1>
    <P>{{ doublethink }}</P>
    <p>{{message}}</p>
    <first_day_test></first_day_test>
  </div>
</template>

<script>
/**
 * 文档说明
 *
 * onMounted, onUnmounted 是定时器相关函数
 *
 * reactive 函数相关内容:
 * - reactive 使用：Reactive函数创建一个响应式对象。
 * - reactive函数 就是VUE3.0为我们提供的替代VUE2.0中data的一个函数
 *
 * reactive ：Reactive函数创建一个响应式对象。
 * 使用 toRefs() 进行数据解析
 * - function() 中使用 return toRefs(data);进行传参
 * - const {count, doublethink} = UserController() 中使用 count, doublethink 进行参数的传参
 * - <P>{{ doublethink }}</P> <p>{{message}}</p> 页面中使用其中值即可
 *
 * 不使用 toRefs() 进行数据解析
 *  - function() 中使用 return data;进行传参
 *  - const double = UserController() 中使用 count, doublethink 进行参数的传参
 *  - <P>{{ double.doublethink }}</P> <p>{{double.message}}</p> 页面中使用其中值即可
 *
 * toRefs()/ref/toRef()相关说明：
 * - 如果利用ref函数将某个对象中的属性变成响应式数据，修改响应式数据是不会影响到原始数据。
 * - **ref的本质是拷贝，与原始数据没有引用关系**
 *
 * - 如果使用toRef将某个对象中的属性变成响应式数据，修改响应式数据是会影响到原始数据的。
 * - 如果修改通过toRef创建的响应式数据，并不会触发UI界面的更新。
 * - **toRef的本质是引用，与原始数据有关联**
 *
 * ref和toRef的区别
 * (1). ref本质是拷贝，修改响应式数据不会影响原始数据；toRef的本质是引用关系，修改响应式数据会影响原始数据
 * (2). ref数据发生改变，界面会自动更新；toRef当数据发生改变是，界面不会自动更新
 * (3). toRef传参与ref不同；toRef接收两个参数，第一个参数是哪个对象，第二个参数是对象的哪个属性
 *
 * - 当我们希望将对象的多个属性都变成响应式数据，并且要求响应式数据和原始数据关联，
 *   并且更新响应式数据的时候不更新界面，就可以使用toRefs，用于批量设置多个数据为响应式数据。(toRef一次仅能设置一个数据)
 *   toRefs接收一个对象作为参数，它会遍历对象身上的所有属性，然后挨个调用toRef执行
 *
 */

// todo 头文件部分

import {reactive, computed, onMounted, onUnmounted, ref, toRefs, watch} from 'vue'
import first_day_test from "@/components/first_day_test";


export default {
  name: 'HelloWorld',
  components:{
    first_day_test
  },
  props: {
    msg: String
  },
  // todo 代码优化部分
  setup(){
    const {count, doublethink} = UserController() // todo count info
    // const desc = ref(null)// todo 使用元素的引用
    const  message = ref("some messages")
    return {count,doublethink,message}
  }
};

// todo  count 相关信息
function UserController() {
    const data = reactive({
      count: ref(1),
      doublethink: computed(() => data.count * 2),
    })

    let timer; // 定时器的一个方法，哟个简单的案例，及在一秒钟之内 count 不断变大/1s 时间差

    onMounted(() => {
      timer = setInterval(() => {
        data.count++
      }, 1000)
    })

    onUnmounted(()=>{
      clearInterval(timer)
    })

  return toRefs(data);
}


// todo 原始代码部分，放在 export default 中
  // setup: function () {
  //   // todo count 相关信息
  //   const data = reactive({
  //     count: 1,
  //     doublethink: computed(() => data.count * 2),
  //   })
  //
  //   let timer; // 定时器的一个方法，哟个简单的案例，及在一秒钟之内 count 不断变大/1s 时间差
  //
  //   onMounted(() => {
  //     timer = setInterval(() => {
  //       data.count++
  //     }, 1000)
  //   })
  //
  //   onUnmounted(()=>{
  //     clearInterval(timer)
  //   })
  //
  //   // todo 替他数据
  //
  //   const  message = ref("some messages")
  //   return {data, message};
  // }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
